<template>
  <view class="coupon-component">
    <view class="item flex-between u-rela u-m-b-30">
      <view class="flex-row u-flex-1">
        <!-- 优惠金额 -->
        <template v-if="item.type === 'discount'">
          <view class="item-left u-p-l-36 u-p-r-24">
            <view class="font-weight-500" :class="[rightClass]"
              ><text class="font-44">{{ item.discount }}</text
              >折</view
            >
            <!-- <view class="font-20 light-color u-text-center" v-if="item.discount_limit > 0">
              最高减{{ item.discount_limit }}</view
            >
            <view class="font-20 light-color u-text-center" v-else>无门槛</view> -->
          </view>
        </template>
        <template v-else>
          <view class="item-left u-p-l-36 u-p-r-24">
            <view class="font-weight-500" :class="[rightClass]"
              >¥ <text class="font-44">{{ item.money }}</text></view
            >
            <view class="font-20 light-color u-text-center" v-if="item.at_least > 0">
              满{{ item.at_least }}可用</view
            >
            <view class="font-20 light-color u-text-center" v-else>无门槛</view>
          </view>
        </template>

        <!-- 优惠类型 -->
        <view class="df fdc u-flex-1">
          <view class="u-line-2 name">{{ item.coupon_name }}</view>
          <text class="light-color font-24 lh-34"
            >{{ $u.timeFormat(item.end_time, 'yyyy.mm.dd hh:MM:ss') }}到期</text
          >
        </view>
      </view>
      <!-- 发放/领券状态 -->
      <view class="item-right u-rela flex-center">
        <slot name="right">
          <view class="item-btn" @click="itemEvent(item)" :class="[rightClass]">{{ right }}</view>
        </slot>
        <view class="circle-up" />
        <view class="circle-bottom" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object,
        default: () => {},
      },
      prompt: {
        type: String,
        default: '',
      },
      right: {
        type: String,
        default: '立即领取',
      },
    },
    data() {
      return {
        keyword: '',
      }
    },
    computed: {
      rightClass() {
        return this.right === '立即领取' || this.right === '立即使用' ? 'active' : 'line'
      },
    },
    methods: {
      itemEvent(item) {
        if (this.right === '立即领取') {
          this.getCoupon()
        }
        if (this.right === '立即使用') {
          this.jump(`/views/goods/sort_list?coupon=${item.coupon_id}&title=商品`)
          // this.switchTab('/pages/index/index')
        }
      },
      /**
       * 领取优惠券
       */
      async getCoupon() {
        let params = {
          coupon_type_id: this.item.coupon_type_id,
          get_type: 2,
        }
        const { code, message } = await this.$api.common.promotion('getCoupon', params)
        if (code === 200) {
          this.$u.toast(message)
          this.$emit('refresh')
        } else if (code === 401) {
          this.toLogin()
        }
      },
    },
  }
</script>

<style lang="scss">
  .coupon-component {
    .item {
      width: 100%;
      height: 190rpx;
      background: #fff;
      // box-shadow: 0 4rpx 40rpx 0 rgba(0, 0, 0, 0.05);
      border-radius: 20rpx;

      &-btn {
        display: flex;
        width: 146rpx;
        height: 52rpx;
        font-size: 24rpx;
        border-radius: 26rpx;
        align-items: center;
        justify-content: center;

        &.active {
          color: #fff;
          background: var(--color);
        }

        &.line {
          color: #999;
        }
      }

      &-left {
        text-align: center;

        .active {
          color: var(--color);
        }

        .line {
          color: #999;
        }
      }

      .name {
        width: 290rpx;
      }

      // 优惠券按钮
      &-right {
        position: relative;
        width: 184rpx;
        height: 100%;

        &::before {
          position: absolute;
          left: 0;
          width: 2rpx;
          height: 120rpx;
          border-left: 1rpx dashed #999;
          content: '';
        }

        .circle-up {
          position: absolute;
          bottom: -12rpx;
          left: -10rpx;
          width: 24rpx;
          height: 24rpx;
          background: #f5f5f5;
          border-radius: 24rpx 24rpx 0 0;
        }

        .circle-bottom {
          position: absolute;
          top: -12rpx;
          left: -10rpx;
          width: 24rpx;
          height: 24rpx;
          background: #f5f5f5;
          border-radius: 0 0 24rpx 24rpx;
        }
      }
    }
  }
</style>
